<template>
    <div class="screen-proxy">
        <el-card
            class="screen-proxy-left"
            body-style="{width: 100%;height: calc(100% - 56px);}"
            :style="backgroundDiv"
        >
            <div class="screen-card-mode" slot="header">
                <span>800*515</span>
            </div>
            <div class="screen-card-title">{{$t('screen.userTo')}}</div>
            <div class="screen-card-text1">{{$t('screen.sipingMainLed')}}</div>
            <el-button
                class="screen-card-button"
                type="primary"
                @click="openSimpleScreen"
            >{{$t('screen.open')}}</el-button>
        </el-card>
        <el-card
            class="screen-proxy-right"
            body-style="{width: 100%;height: calc(100% - 56px);}"
            :style="backgroundDivRight"
        >
            <div class="screen-card-mode" slot="header">
                <span>1920*1080</span>
            </div>
            <div class="screen-card-title">{{$t('screen.userTo')}}</div>
            <div class="screen-card-text">{{$t('screen.sipingZHONGHELed')}}</div>
            <div class="screen-card-text2">{{$t('screen.jiadingLed')}}</div>
            <el-button
                class="screen-card-button"
                type="primary"
                @click="openScreen"
            >{{$t('screen.open')}}</el-button>
        </el-card>
        <div style="clear:both;"></div>
        <div class="screen-proxy-tips">tips:{{$t('screen.tip')}}</div>
        <div class="screen-face">
            <div class="demo-image">
                <span>
                    <img src="static/images/screen/screen_face.png" alt />
                </span>
            </div>
            <div class="demo-button">
                <el-button
                    class="screen-face-button"
                    type="primary"
                    @click="down"
                >{{$t('screen.down')}}</el-button>
                <el-button
                    class="screen-face-button"
                    type="primary"
                    @click="upload"
                >{{$t('screen.upload')}}</el-button>
            </div>
            <div class="screen-face-tips">{{$t('screen.remark')}}</div>
        </div>
        <edu-dialog
            :title="$t('screen.upload')"
            width="40%"
            ref="uploadDialog"
            @open="openDialog"
            @close="clearFiles"
            @confirm="uploadFile"
        >
            <el-form label-width="85px">
                <el-row>
                    <el-form-item>
                        <el-upload
                            ref="upload"
                            :headers="{'X-Token': $store.state.session.sessionid}"
                            :data="{bucketname: 'face', folderpath: 'file'}"
                            :on-success="uploadDone"
                            :on-error="onError"
                            :auto-upload="false"
                            :multiple="false"
                            :on-change="(file, fileList)=>{this.fileList = fileList}"
                            :limit="1"
                            action="/api/commonservice/obsfile/uploadfile"
                        >
                            <el-button
                                slot="trigger"
                                size="small"
                                type="primary"
                            >{{$t('label.selectFile')}}</el-button>
                        </el-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </edu-dialog>
    </div>
</template>

<script>
import examinationLevelApi from "common/src/api/welcomeService/examinationLevel";
import { pingSession } from "common/src/api/session";
export default {
    name: "Screen",
    data() {
        return {
            backgroundDiv: {
                background:
                    "url(/public/static/images/screen/bg_left.png)"
            },
            backgroundDivRight: {
                background:
                    "url(/public/static/images/screen/bg_right.png)"
            },
            showSubmitDialog: false,
            path: ""
        };
    },
    /*
  static\images\screen\screen_face.png 
   */
    methods: {
        init() {},
        openSimpleScreen() {
            this.goto("SimpleScreen");
        },
        openScreen() {
            this.goto("NormalScreen");
        },
        goto(router_name) {
            const { href } = this.$router.resolve({
                name: router_name
            });
            window.open(href, "_blank");
        },
        down() {
            examinationLevelApi.getfaceClientPath().then(res => {
                if (res.code == 200) {
                    window.location.href =
                        "/api/commonservice/obsfile/downloadfile?objectkey=" +
                        res.data;
                } else {
                    throw response.code;
                }
            });
        },
        upload() {
            this.$refs.uploadDialog.open();
            this.doPing();
        },
        openDialog() {
            this.showDialog = true;
            console.log("open");
        },
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.showDialog = false;
            console.log("close");
        },
        uploadFile() {
            this.$refs.upload.submit();
        },
        uploadDone(res, file, fileList) {
            if (res.code == 200) {
                this.path = "";
                this.path = res.data[file.name].objectkey;
                examinationLevelApi.uploadClient(this.path).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("common.tips.uploadSuccess")
                        });
                    } else {
                        throw response.code;
                    }
                });
                this.$message({
                    type: "success",
                    message: this.$t("common.tips.uploadSuccess")
                });
                this.$refs.uploadDialog.close();
            } else {
                this.$message({
                    type: "error",
                    message: this.$t("common.tips.dataFormatError")
                });
                this.clearFiles();
            }
        },
        onError(err, file, fileList) {
            let msg = JSON.parse(err.message);
            this.$message({
                type: "error",
                message: msg.message
            });
        },
        doPing() {
            pingSession().then(res => {
                if (res.code == 200 && this.showDialog) {
                    setTimeout(() => {
                        this.doPing();
                    }, 1000 * 60);
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.screen-proxy {
    width: 100%;
    height: 100%;
    padding-top: 60px;

    &-left {
        float: left;
        width: 330px;
        height: 410px;
        padding: 25px;
        margin-left: calc(50% - 300px);
    }

    &-right {
        float: left;
        width: 330px;
        height: 410px;
        padding: 25px;
        margin-left: 40px;
        margin-top: 0px;
    }

    &-tips {
        clear: both;
        width: 510px;
        margin-top: 10px;
        margin-left: calc(50% - 105px);
    }
}

.screen-card {
    &-mode {
        height: 30px;
        line-height: 30px;
        text-align: center;
        // border-bottom: solid gray 1px;
    }

    &-title {
        height: 26px;
        line-height: 90px;
        text-align: center;
    }

    &-text {
        height: 52px;
        line-height: 100px;
        text-align: center;
    }

    &-text1 {
        height: calc(100% - 58px);
        line-height: 100px;
        text-align: center;
    }

    &-text2 {
        height: calc(100% - 110px);
        line-height: 60px;
        text-align: center;
    }

    &-button {
        width: 60%;
        height: 32px;
        margin: 0px 20%;
    }
}
.screen-face {
    width: 685px;
    margin-left: calc(50% - 300px);
    margin-top: 50px;
    display: none;

    .demo-image {
        margin-left: calc(50% - 24px);
    }

    .demo-button {
        margin-left: calc(36% - 24px);
    }

    &-button {
        width: 120px;
        height: 50px;
        margin-top: 10px;
        ///margin-left: calc(50% - 57px);
    }
    &-tips {
        clear: both;
        width: 600px;
        margin-top: 10px;
        margin-left: calc(50% - 260px);
    }
}
</style>
